<template>
  <div class="Home">
    <a-row :gutter="30">
      <a-col class="gutter-row" :span="6">
        <div class="gutter-box">
          <a-card>
            <p>
              <span>当前代理商总数</span>
              <a-icon type="info-circle"/>
            </p>
            <p>{{agentCount}}</p>
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="6">
        <div class="gutter-box">
          <a-card>
            <p>
              <span>网点总数</span>
              <a-icon type="info-circle"/>
            </p>
            <p>{{branchCount}}</p>
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="6">
        <div class="gutter-box">
          <a-card>
            <p>
              <span>点位总数</span>
              <a-icon type="info-circle"/>
            </p>
            <p>{{posCount}}</p>
          </a-card>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="6">
        <div class="gutter-box">
          <a-card>
            <p>
              <span>设备总数</span>
              <a-icon type="info-circle"/>
            </p>
            <p>{{deviceCount}}</p>
          </a-card>
        </div>
      </a-col>
    </a-row>
    <a-tabs type="card" style="margin-top:2%;">
      <a-tab-pane tab="今日数据" key="1">
        <a-card style="border:0;">
          <a-row :gutter="30">
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/订单总数.png" alt>
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">实际入账总额：</a-col>
                      <a-col :span="5">
                        <a-icon type="info-circle"/>
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >126,560</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/销售额.png" alt>
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">微信收入：</a-col>
                      <a-col :span="5">
                        <a-icon type="info-circle"/>
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 126,560.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-row :gutter="0">
                  <a-col :span="8">
                    <img src="../../assets/客单价.png" alt>
                  </a-col>
                  <a-col :span="15">
                    <a-row :gutter="40" style="font-size:1rem;">
                      <a-col :span="18">支付宝收入：</a-col>
                      <a-col :span="5">
                        <a-icon type="info-circle"/>
                      </a-col>
                    </a-row>
                    <a-row
                      :gutter="0"
                      style="font-size:1.8rem;margin-top:0.5em;color: rgb(0, 12, 23);"
                    >¥ 6.00</a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-tab-pane>
      <a-tab-pane tab="昨日数据" key="2">
        <p>Content of Tab Pane 2</p>
        <p>Content of Tab Pane 2</p>
        <p>Content of Tab Pane 2</p>
      </a-tab-pane>
      <a-tab-pane tab="本月数据" key="3">
        <p>Content of Tab Pane 3</p>
        <p>Content of Tab Pane 3</p>
        <p>Content of Tab Pane 3</p>
      </a-tab-pane>
    </a-tabs>
    <a-card style="margin-top:2%">
      <a-tabs defaultActiveKey="1">
        <div class="extra-wrapper" slot="tabBarExtraContent">
          <div class="extra-item">
            <a>今日</a>
            <a>近七天</a>
            <a>近30天</a>
          </div>
          <a-range-picker :style="{width: '256px'}"/>
        </div>
        <a-tab-pane tab="代理商销售排行" key="1">
          <ve-histogram :data="chartData" :settings="chartSettings"></ve-histogram>
        </a-tab-pane>
        <a-tab-pane tab="网点销售排行" key="2" forceRender>Content of Tab Pane 2</a-tab-pane>
        <a-tab-pane tab="品类销售排行" key="3">Content of Tab Pane 3</a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    this.chartSettings = {
      stack: { 用户: ["访问用户", "下单用户"] }
    };
    return {
      chartData: {
        columns: ["日期", "访问用户", "下单用户", "下单率"],
        rows: [
          { 日期: "1/1", 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
          { 日期: "1/2", 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
          { 日期: "1/3", 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
          { 日期: "1/4", 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
          { 日期: "1/5", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
          { 日期: "1/6", 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
        ]
      },
      agentCount: "",
      branchCount: "",
      posCount: "",
      deviceCount: ""
    };
  },
  components: {},
  methods: {
    // 设备概况统计
    deviceStats() {
      this.axios
        .post(this.baseUrl + "/homepage/deviceStats", {
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          // console.log(response);
          this.agentCount = response.data.data.agentCount;
          this.branchCount = response.data.data.branchCount;
          this.posCount = response.data.data.posCount;
          this.deviceCount = response.data.data.deviceCount;
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  created() {
    this.deviceStats();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.gutter-example >>> .ant-row > div {
  background: transparent;
  border: 0;
}
.gutter-box {
  padding: 5px 0;
}
.gutter-box .ant-card {
  transition: all 0s;
}
.gutter-box .ant-card:hover {
  box-shadow: 0 10px 10px rgb(207, 227, 246);
  transform: translateY(-5%);
}
.gutter-box .ant-card-body p:nth-of-type(1) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgb(146, 146, 146);
}
.gutter-box .ant-card-body p:nth-of-type(2) {
  font-size: 2em;
  margin: 0;
  color: rgb(39, 39, 39);
}
.ant-tabs-bar {
  border-bottom: none;
}

.extra-wrapper {
  line-height: 40px;
  padding-right: 24px;
}
.extra-item {
  display: inline-block;
  margin-right: 24px;
}
a {
  margin-left: 24px;
}
</style>
